Coding 4: Display Tasks Using ShadCN Table (READ)

🎯 Objective:

Build the "Read" part of CRUD by listing tasks inside a modern, responsive ShadCN table UI.

---

🧱 A. Generate ShadCN Table Component

1. Run the CLI command to add the table:

npx shadcn@latest add table

2. ✅ This will create the table components in:

src/components/ui/table.tsx

You now have access to reusable components:

• <Table>, <TableHeader>, <TableHead>, <TableRow>, <TableBody>, <TableCell>

---

🧱 B. Create the Task Table Component

1. Create the file:

mkdir -p src/components/task && touch src/components/task/TaskTable.tsx

2. Add the following code to TaskTable.tsx:

import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
  } from "@/components/ui/table"
import { Button } from "../ui/button"
  
  interface Task{
    id: string
    title: string
    description: string
    priority: string
    isCompleted: boolean
    dueDate: string
  }
  
  type TaskTableProps = {
    tasks: Task[]
  }
  
  export default function TaskTable({ tasks }: TaskTableProps) {
    return (
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead className="w-[50px]">#</TableHead>
            <TableHead>Task Title</TableHead>
            <TableHead>Description</TableHead>
            <TableHead>Priority</TableHead>
            <TableHead>Completed</TableHead>
            <TableHead>Due Date</TableHead>
            <TableHead className="text-right">Actions</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {tasks.length === 0 ? (
            <TableRow>
              <TableCell colSpan={3} className="text-center py-6 text-gray-500">
                No tasks available.
              </TableCell>
            </TableRow>
          ) : (
            tasks.map((task, index) => (
              <TableRow key={task.id}>
                <TableCell>{index + 1}</TableCell>
                <TableCell>{task.title}</TableCell>
                <TableCell className="text-right text-gray-400 italic">Coming soon</TableCell>
                <TableCell className="text-right text-gray-400 italic">Coming soon</TableCell>
                <TableCell className="text-right text-gray-400 italic">Coming soon</TableCell>
                <TableCell className="text-right text-gray-400 italic">Coming soon</TableCell>
                <TableCell>
                <div>
                    <Button>Edit</Button> | 
                    <Button variant="destructive">Delete</Button>
                </div>
                </TableCell>
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>
    )
  }

---

🧱 C. Use It Inside TaskPage.tsx

1. Open src/pages/TaskPage.tsx

2. Update with:

import { useState } from "react"
import TaskTable from "@/components/task/TaskTable"
import { Button } from "@/components/ui/button"

interface Task{
    id: string
    title: string
    description: string
    priority: string
    isCompleted: boolean
    dueDate: string
  }

export default function TaskPage() {
  const [tasks] = useState<Task[]>([
    { id: "1", title: "Install TailwindCSS", description: "", priority: "", isCompleted: false, dueDate: "" },
    { id: "2", title: "Add ShadCN UI Table", description: "", priority: "", isCompleted: false, dueDate: ""},
  ])

  return (
    <div className="max-w-4xl mx-auto mt-10 space-y-6">
      <h1 className="text-3xl font-bold text-center">📋 Task Table</h1>
      <Button>Create Task</Button>
      <TaskTable tasks={tasks} />
    </div>
  )
}